/*
 * @Author: Lin Hongwei
 * @Date: 2021-11-26 22:14:21
 * @LastEditTime: 2021-12-06 22:14:06
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 配置公共代码
 */
const path = require("path");

//html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入vue-loader携带的插件
const VueLoderPlugin = require("vue-loader/lib/plugin");
//单独打包出css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//自动添加css厂商前缀
// const Autoprefixer = require('autoprefixer');
//引入webpack插件
const Webpack = require('webpack');
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
    //入口文件
    entry: "./src/main.js",
    //输出文件
    output: {
        //输出文件的名字,可以指定路径
        //多文件打包的时候[name]可以根据入口文件打包多个出口文件
        filename: "js/[name].js",
        // path:path.resolve(__dirname,"dist")
        path: __dirname + "/dist",
        // assetModuleFilename: 'images/[name][hash:5][ext][query]'//webpack5为资源指定名字
    },
    //打包规则
    module: {
        rules: [
            {
                //es6解析
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                //正则匹配对应要处理的文件
                test: /\.vue$/,
                //指定loader（从右到左，从后到前依次执行）
                use: ['vue-loader']
            },
            /*{
                test: /\.(png|jpg|jpeg|avg|gif)/,
                type:'asset/resource'
            },*/
            {
                test: /\.(png|jpg|jpeg|avg|gif)/,
                loader: 'url-loader',
                options: {
                    //配置打包后的文件名
                    name: '[name][hash:5].[ext]',
                    //小于这个将进行转码
                    limit: 8 * 1024,
                    //输出的文件路径
                    outputPath: 'images',
                    //关闭url-loader的es6模块化 ,使用commonjs
                    esModule: false,
                },
                //在5中使用url-loader可能会导致图片打包冲突,添加这个来自动监听
                type: 'javascript/auto'
            },
            // {
            //     test:/\.css$/,
            //     //css-loader打包css文件后，用style-loader在页面创建style标签，并将这些文件内容插入
            //     use:['style-loader','css-loader']
            // },

            /*{
                test: /\.s(a|c)ss$/,
                //css-loader打包css文件后，用style-loader在页面创建style标签，并将这些文件内容插入
                use: ['style-loader', 'css-loader', 'sass-loader']
            },*/
            /*{
                test: /\.less$/,
                //css-loader打包css文件后，用style-loader在页面创建style标签，并将这些文件内容插入
                use: ['style-loader', 'css-loader', 'less-loader']
            },*/
            {
                test: /\.css$/,
                //css-loader打包css文件后，用style-loader在页面创建style标签，并将这些文件内容插入
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            //指定公共路径,默认webpackOptions.output中使用publicPath
                            //当MiniCssExtractPlugin抽离出单独的css文件的时候，定义了路径，静态资源在css中引用将会是css输出的路径
                            //例如下面： filename:'./css/xxx.css'，则图片引用的路径打包将会是/css/images/xxx
                            publicPath: "../"
                        }
                    },
                    'css-loader',
                    'postcss-loader'

                ]

            },
            {
                test: /\.s(a|c)ss$/,
                //css-loader打包css文件后，用style-loader在页面创建style标签，并将这些文件内容插入
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                //css-loader打包css文件后，用style-loader在页面创建style标签，并将这些文件内容插入
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(woff2|woff|ttf)$/,
                loader: "url-loader",
                options: {
                    name: "[name][hash:5].[ext]",
                    limit: 1024,
                    outputPath: "icon",
                    esModule: false,
                    // publicPath: "../"
                },
                type: "javascript/auto"
            }
        ]
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            //指定头部
            title: "Webpack搭建Vue项目",
            //指定模板文件
            template: __dirname + "/public/index.html",
            minify: {
                collapseWhitespace: false,//清除空格
                removeComments: false,//移除注释
                removeAttributeQuotes: false,//清除多余引号
            },
            //为所有js和css等静态资源路径上添加?hash值
            //有效解决缓存问题
            hash: true
        }),
        new VueLoderPlugin(),
        new MiniCssExtractPlugin({
            //指定输出的文件名
            //指定了css路径，则会导致在css中引用的文件路径都会从css开始
            // filename:'./css/[name][hash:5].css'
            filename: "./css/[name].css"
        }),
        //热模块替换插件,webpack5自动引入
        // new Webpack.HotModuleReplacementPlugin(),
        // Autoprefixer
        //拷贝文件
        new CopyWebpackPlugin({
            patterns: [
              { 
                  from: path.resolve(__dirname,"src/static"), //来自哪里
                  to:  path.resolve(__dirname,"dist/static"),//打包到哪里
              },
            ],
        })

    ],
    resolve:{
        alias:{
            //设置一个别名@指向src目录
            '@':path.resolve(__dirname, 'src')
        }
    }
}